import React, { Component } from "react";

// props的传递依旧是使用自定义属性的方式
// 子组件是不能改变props的值，单向数据流

// 类组件使用this.props的方式进行接受
class Header extends Component {
  render() {
    return <header>头部组件 - {this.props.count}</header>;
  }
  // 生命周期，相当于vue的mounted
  // componentDidMount() {
  //   setTimeout(() => {
  //     this.props.count = 20;
  //   }, 2000);
  // }
}

// 函数组件直接通过props参数进行接受
const Main = (props) => {
  return <main>内容组件 - {props.name}</main>;
};

class App extends Component {
  state = {
    count: 10,
  };
  render() {
    return (
      <>
        <h2>props</h2>
        <Header count={this.state.count} />
        <Main name="zhangsan" />
      </>
    );
  }
  // componentDidMount() {
  //   setTimeout(() => {
  //     this.setState({
  //       count: 20,
  //     });
  //   }, 2000);
  // }
}

export default App;
